<template>
  <div class="chat-window">
    <div class="chat-header">
      <Avatar class="avatar-ct" :size="64" />
      <span class="chat-username">{{ chatName }}</span>
      <Button class="close-button" @click="$emit('close')">×</Button>
    </div>
    <div
      class="message-container"
      ref="messageContainerRef"
      @contextmenu.prevent="handleContextMenu"
    >
      <List :data-source="messages" :render-item="renderMessage"></List>
    </div>
    <div class="chat-input">
      <TextArea
        v-model="inputMessage"
        @keydown="handleKeyDown"
        :autosize="{ minRows: 1, maxRows: 6 }"
      />
      <Button
        type="primary"
        @click="handleUserSendMsg"
        :disabled="!inputMessage.trim()"
        >发送</Button
      >
      <div
        class="context-menu"
        v-show="contextMenu.visible"
        :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
      >
        <div @click="changeAI">更换GPT</div>
        <div @click="clearChat">清空聊天</div>
        <div @click="exportChatAsImage">导出图片</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Avatar, Input, List } from 'ant-design-vue'
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'

const { TextArea } = Input

export default defineComponent({
  components: {
    Avatar,
    List,
  },
  setup(props, { emit }) {
    const messages = ref([])
    const inputMessage = ref('')
    const connected = ref(true)
    const isModalVisible = ref(false)
    const contextMenu = ref({ visible: false, x: 0, y: 0 })
    const messageContainerRef = ref(null)
    const chatName = 'Kbot'

    const handleContextMenu = (event) => {
      contextMenu.value = {
        visible: true,
        x: event.clientX,
        y: event.clientY,
      }
    }

    const closeContextMenu = () => {
      contextMenu.value = { visible: false, x: 0, y: 0 }
    }

    const handleKeyDown = (e) => {
      if (e.key === 'Enter' && e.ctrlKey) {
        handleUserSendMsg()
      }
    }

    const handleUserSendMsg = () => {
      if (inputMessage.value.trim() !== '') {
        messages.value.push({
          text: inputMessage.value,
          fromUser: true,
        })
        // 处理发送逻辑
        inputMessage.value = ''
      }
    }

    const renderMessage = (message) => {}

    onMounted(() => {
      // WebSocket设置逻辑
    })

    onBeforeUnmount(() => {
      // 清理WebSocket逻辑
    })

    return {
      messages,
      inputMessage,
      connected,
      isModalVisible,
      contextMenu,
      messageContainerRef,
      handleKeyDown,
      handleUserSendMsg,
      closeContextMenu,
      changeAI: () => {},
      clearChat: () => {
        messages.value = []
      },
      exportChatAsImage: () => {},
    }
  },
})
</script>

<style scoped>
.chat-window {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  position: fixed;
  bottom: 30px;
  right: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.chat-username {
  margin-left: 10px;
  font-weight: bold;
}

.message-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.context-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  z-index: 1000;
}

.context-menu div {
  padding: 8px;
  cursor: pointer;
}

.context-menu div:hover {
  background-color: #f0f0f0;
}

.close-button {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
</style>
